import { Toast } from 'antd-mobile';
import React, { useState,useEffect,useContext } from 'react'
import { MyContext } from '../../App';
import Header from '../../components/Header/Header';
import { reqcartadd, reqgetgoodsinfo } from '../../http/api';
import { $pre } from '../../http/http';
import "./Detail.less"

const Detail = (props) => {
  const [good, setGood] = useState({})
  const {state:{info:{uid}}} = useContext(MyContext)

  let { id } = props.match.params;
  useEffect(() => {
    reqgetgoodsinfo({id}).then(res=>{
      if(res.data.code===200){
        setGood(res.data.list[0])
      }
    })
  }, [])
  
  const addShop = () =>{
    reqcartadd({uid,goodsid:id,type:1,num:1}).then(res=>{
      if(res.data.code===200){
        Toast.show({
          content:res.data.msg
        })
      }
    })
  }

  return (
    <div className='detail'>
      <Header title="商品详情" back></Header>
      <img src={$pre + good.img} alt="" />
      <h2>{good.goodsname}</h2>
      <div className='price'>原价：<del>￥{good.market_price}</del></div>
      <div className='price'>现价：￥{good.price}</div>
      <div className="footer">
        <span className='toshop' onClick={() => props.history.push("/index/shop")}>前往购物车</span>
        <span className='addshop' onClick={() => addShop()}>加入购物车</span>
      </div>
    </div>
  )
}

export default Detail